<template>
  <div>
    <el-alert title="成功提示的文案" type="success" v-show="collectAlaerdy">
    </el-alert>
    <!-- 头条收藏举报魔态框 -->
    <el-dialog
      :visible.sync="touTiaodialogVisible"
      width="35%"
      class="toutiao-message"
      :show-close="false"
      :center="true"
    >
      <div class="toutiao-message-con">
        <span @click="contentLike()">收藏</span><br />
        <br />
        <span @click="touTiaoJuBao()">举报</span>
      </div>
    </el-dialog>
    <!-- 头条收藏魔态框 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <div class="collectTouTiaoTopAll">
        <div class="collectTouTiaoTop">
          <span>选择收藏夹</span>
        </div>
        <hr />
        <div class="collectTouTiaoTopCon">
          <div class="collectTouTiaoTopCon-con">默认收藏单</div>
          <div class="collectTouTiaoTopCon-con">我的喜欢</div>
          <van-radio-group v-model="radio" class="danxuankuang">
            <van-radio
              name="1"
              shape="square"
              class="danxuankuang-item"
            ></van-radio>
            <van-radio
              name="2"
              shape="square"
              class="danxuankuang-item"
            ></van-radio>
          </van-radio-group>
        </div>

        <van-button
          type="default"
          size="large"
          class="collectTouTiaoTopConAlaery"
          @click="collectTouTiaoTopAlaery()"
          >完成</van-button
        >
      </div>
    </van-popup>

    <div class="border">
      <div class="index_head">
        <van-image
          v-if="id === null"
          @click="jumpLogin()"
          class="index_touxiang"
          round
          width="3rem"
          height="3rem"
          src=""
        />
        <van-image
          v-else
          @click="jumpTouxiangDetail()"
          class="index_touxiang"
          round
          width="3rem"
          height="3rem"
          :src="url"
        />
        <van-search
          @focus="jumpSouSuo()"
          class="index_search"
          shape="round"
          background="#6c90f3"
          v-model="value"
          placeholder="请输入搜索关键词"
        />
        <van-icon
          class="index_soft"
          name="send-gift-o"
          size="30"
          color="whitesmoke"
        />
        <van-icon
          v-if="id === ''"
          @click="jumpLogin()"
          class="index_chat"
          name="chat-o"
          size="30"
          color="whitesmoke"
        />
        <van-icon
          v-else
          @click="jumpNotice()"
          class="index_chat"
          name="chat-o"
          size="30"
          color="whitesmoke"
        />
      </div>
      <div>
        <van-tabs
          background="#6c90f3"
          title-inactive-color="white"
          class="index_tab van_tab"
          v-model="active"
          @click="onClick"
          sticky
        >
          <van-tab title="关注" title-style="font-size:20px">
            <div
              class="index_care"
              v-for="(item, index) in careList"
              :key="index"
            >
              <van-image
                class="index_care_touxiang"
                round
                width="4rem"
                height="4rem"
                :src="item.user_image_road"
              />
              <div class="con" @click="toutiaoTextDetail(item)">
                <van-image
                  round
                  width="5rem"
                  height="5rem"
                  :src="item.user_image_road"
                  class="toutiaoUserImg"
                  fit="cover"
                />
                <!-- 关注收藏 -->
                <van-icon
                  name="arrow-down"
                  class="unfold"
                  @click="collentThis(item)"
                />
                <div class="toutiaoUserName">{{ item.user_name }}</div>
                <div class="toutiaoTime">{{ item.discuss_date }}</div>
                <div class="toutiaoText">{{ item.discuss_text }}</div>

                <div
                  v-for="(items, index) in item.Image"
                  :key="index"
                  class="textImg"
                >
                  <van-image
                    width="8rem"
                    height="8rem"
                    fit="cover"
                    :src="items.discuss_review_image_road"
                  />
                </div>
              </div>
              <div class="icon">
                <img
                  v-show="item.show"
                  src="static/images/heartBefore(1).png "
                  alt=""
                  width="14rem"
                  @click="giveLikesFouces(item, index)"
                />
                <img
                  v-show="!item.show"
                  src="static/images/heartBefore(0).png"
                  alt=""
                  width="14rem"
                  @click="giveLikesFouces(item, index)"
                />
                <span class="discuss">{{ item.topic_likes }}</span>
                <van-icon name="chat-o" size="1.5rem" />
                <span class="discuss">{{ item.cun }}</span>
              </div>
            </div>
          </van-tab>
          <!-- 头条 -->
          <van-tab title="头条" title-style="font-size:20px">
            <!-- 轮播 -->
            <div class="block">
              <van-swipe
                class="my-swipe"
                :autoplay="3000"
                indicator-color="white"
              >
                <van-swipe-item>
                  <van-image
                    src="static/images/1.jpg"
                    class="my-swipe1"
                    fit="contain"
                  />
                </van-swipe-item>
                <van-swipe-item>
                  <van-image
                    src="static/images/3.jpeg"
                    class="my-swipe1"
                    fit="contain"
                  />
                </van-swipe-item>
                <van-swipe-item>
                  <van-image
                    src="static/images/4.jpg"
                    class="my-swipe1"
                    fit="contain"
                  />
                </van-swipe-item>
              </van-swipe>
            </div>
            <!-- 循环 -->
            <div
              class="heart_banner2"
              v-for="(item, index) in touTiaoList"
              :key="index"
              @click="toutiaoTextDetail(item)"
            >
              <div class="con1" @click="toutiaoTextDetail(item)">
                <van-image
                  round
                  width="5rem"
                  height="5rem"
                  :src="item.user_image_road"
                  class="toutiaoUserImg"
                  fit="cover"
                />
                <!-- 收藏 -->
                <van-icon
                  name="arrow-down"
                  class="unfold"
                  @click="collentThis(item)"
                />
                <div class="toutiaoUserName">{{ item.user_name }}</div>
                <div class="toutiaoTime">{{ item.discuss_date }}</div>
                <div class="toutiaoText">{{ item.discuss_text }}</div>

                <div
                  v-for="(items, index) in item.Image"
                  :key="index"
                  class="textImg"
                >
                  <van-image
                    width="8rem"
                    height="8rem"
                    fit="cover"
                    :src="items.discuss_review_image_road"
                  />
                </div>
              </div>
              <div class="icon">
                <img
                  v-show="item.show"
                  src="static/images/heartBefore(0).png "
                  alt=""
                  width="13rem"
                  @click="giveLikes(item, index)"
                />
                <img
                  v-show="!item.show"
                  src="static/images/heartBefore(1).png"
                  alt=""
                  width="14rem"
                  @click="giveLikes(item, index)"
                />
                <span class="discuss">{{ item.discuss_likes }}</span>
                <van-icon
                  name="chat-o"
                  size="1.5rem"
                  @click="toutiaoTextDetail(item)"
                />
                <span class="discuss" @click="toutiaoTextDetail(item)">{{
                  item.cun
                }}</span>
              </div>
            </div>
            <div class="footLast"></div>
            <br />
          </van-tab>
          <van-tab title="热门" title-style="font-size:20px">
            <div
              class="index_care"
              v-for="(item, index) in remenList"
              :key="index"
            >
              <van-image
                class="index_care_touxiang"
                round
                width="4rem"
                height="4rem"
                :src="item.user_image_road"
              />
              <div class="con" @click="toutiaoTextDetail(item)">
                <van-image
                  round
                  width="5rem"
                  height="5rem"
                  :src="item.user_image_road"
                  class="toutiaoUserImg"
                  fit="cover"
                />
                <van-icon
                  name="arrow-down"
                  class="unfold"
                  @click="collentThis(item)"
                />
                <div class="toutiaoUserName">{{ item.user_name }}</div>
                <div class="toutiaoTime">{{ item.discuss_date }}</div>
                <div class="toutiaoText">{{ item.discuss_text }}</div>

                <div
                  v-for="(items, index) in item.Image"
                  :key="index"
                  class="textImg"
                >
                  <van-image
                    width="8rem"
                    height="8rem"
                    fit="cover"
                    :src="items.discuss_review_image_road"
                  />
                </div>
              </div>
              <div class="icon">
                <img
                  v-show="item.show"
                  src="static/images/heartBefore(0).png "
                  alt=""
                  width="14rem"
                  @click="giveLikesFoucesReMen(item, index)"
                />
                <img
                  v-show="!item.show"
                  src="static/images/heartBefore(1).png"
                  alt=""
                  width="14rem"
                  @click="giveLikesFoucesReMen(item, index)"
                />
                <span class="discuss">{{ item.topic_likes }}</span>
                <van-icon name="chat-o" size="1.5rem" />
                <span class="discuss">{{ item.cun }}</span>
              </div>
            </div>
          </van-tab>
          <van-tab title="话题" title-style="font-size:20px">
            <div
              class="heart_bannerLast"
              v-for="(item, index) in topicList"
              :key="index"
            >
              <div
                @click="toTopicDetial(item)"
                class="heart_bannerLast_content"
              >
                <van-image
                  width="5rem"
                  height="5rem"
                  fit="cover"
                  :src="topicList.topic_image_road"
                  class="imgFirst"
                />
                <span>{{ item.topic_name }}</span
                ><br />
                <div class="hot">{{ item.topic_hot_number }}热度</div>
                <div class="topic_discussion_number">
                  {{ item.topic_discussion_number }}讨论量
                </div>
                <!-- 不知道是啥，传入 -->
                <van-icon
                  name="arrow"
                  class="iconLast"
                  @click="toTopicDetial(item)"
                />
              </div>
            </div>
          </van-tab>
          <!-- <van-tab title="动态" title-style="font-size:20px">内容 4</van-tab> -->
        </van-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
import http from '../api/index';
import util from '../util/index';
import Vue from 'vue';
export default {
  data() {
    return {
      value: '',
      id: sessionStorage.getItem('roleId'),
      url: sessionStorage.getItem('src'),
      active: parseInt(sessionStorage.getItem('activesItem') )|| 1,
      careList: [],
      touTiaoList: [],
      isShow: false,
      fouceList: [],
      reBangList: [],
      touTiaodialogVisible: false,
      countZan: 0,
      index: 0,
      showAdd: true,
      img: [
        'static/images/heart(3).png',
        'static/images/heart(0).png',
        'static/images/heart(1).png',
      ],
      activeName: 'second',
      collentContent: true,
      radio: '1',
      show: false,
      collectAlaerdy: false,
      chooseItem: [],
      topicList: [],
      remenList: [],
    };
  },
  mounted() {
    this.getTouTiao();
    this.fouceGet();
    this.reBang();
    this.getTopicContentAll();
  },
  methods: {
    // 搜索
    jumpSouSuo(){
      this.$router.push('/sousuo');

    },
    //话题跳转
    toTopicDetial(item) {
      console.log(this.active);
      sessionStorage.setItem('activesItem',this.active);
     
      console.log('item', item);
      this.$router.push('/topicDetail/' + item.topic_id);
      event.stopPropagation();
    },
    jumpLogin() {
      this.$router.push('/login');
    },
    // 通知
    jumpNotice() {
      this.$router.push('/notice');
    },
    // 跳到用户信息
    jumpTouxiangDetail() {
      this.$router.push('/detail');
    },
    //头条举报
    touTiaoJuBao() {
      // console.log('item',this.chooseItem);
      console.log('hhh', this.active);
      sessionStorage.setItem('active', this.active);

      this.$router.push('/report/' + this.chooseItem.user_id);
    },
    //头条收藏完成
    collectTouTiaoTopAlaery() {
      this.show = false;
      this.$message({
        type: 'success',
        message: '收藏成功!',
      });
    },
    //收藏底部菜单栏
    contentLike() {
      this.touTiaodialogVisible = false;
      this.show = true;
    },
    // 跳到用户信息
    jumpTouxiangDetail() {
      this.$router.push('/detail');
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    /* 头条魔态框 */
    collentThis(item) {
      this.chooseItem = item;
      this.touTiaodialogVisible = true;
      event.stopPropagation();
    },
    // 首页点赞
    giveLikesFouces(item, index) {
      this.showAdd = !this.showAdd;
      item.show = !item.show;
      if (item.show === true) {
        item.topic_likes = item.topic_likes + 1;
      } else {
        item.topic_likes = item.topic_likes - 1;
        util
          .getDynamicLikes({
            discuss_record_id: item.topic_record_id,
          })
          .then((r) => {
            console.log(r);
          });
      }
      this.$forceUpdate();
    },
    //热门点赞
    giveLikesFoucesReMen(item, index) {
      item.show = !item.show;
      this.$forceUpdate();
    },
    /* 头条点赞 */
    giveLikes(item, index) {
      this.showAdd = !this.showAdd;
      item.show = !item.show;
      if (item.show === true) {
        item.discuss_likes = item.discuss_likes - 1;
      } else {
        item.discuss_likes = item.discuss_likes + 1;
        util
          .getDynamicLikes({
            discuss_record_id: item.discuss_record_id,
          })
          .then((r) => {
            console.log(r);
          });
      }
      event.stopPropagation()
      this.$forceUpdate();
    },
    /* 头条跳页面详情 */
    toutiaoTextDetail(item) {
      console.log('item', item);
      sessionStorage.setItem('item', item);
      //this.$router.push
      this.$router.push('/touTiaoDital/' + item.discuss_record_id);
    },
    /* 切换 */
    onClick(name, title) {
      // console.log(name);
      // console.log(title);
      if (name === 0) {
        http.userCare().then((r) => {
          console.log(r, 'r');
          this.careList = r.data;
        });
      } else if (name === 1) {
        http
          .getTouTiao({
            pages: 1,
          })
          .then((r) => {
            console.log(r);
          });
      }
    },
    //热榜所有
    reBang() {
      util
        .getRebang({
          pages: 1,
        })
        .then((res) => {
          this.remenList = res.data;
          console.log('热榜', res);
        });
    },
    //关注所有
    fouceGet() {
      util
        .getFollowUserDynamic({
          user_id: 4,
        })
        .then((res) => {
          this.careList = res.data.data;
          console.log('关注', res);
          for (let i = 0; i < this.careList.length; i++) {
            this.careList[i].show = true;
          }
        });
    },
    // 头条所有
    getTouTiao() {
      this.$nextTick(function () {
        http
          .getTouTiao({
            pages: 1,
          })
          .then((r) => {
            this.touTiaoList = r.data;
            for (let i = 0; i < this.touTiaoList.length; i++) {
              this.touTiaoList[i].show = true;
            }
          });
      });
    },
    //话题所有
    getTopicContentAll() {
      util.getTopicContentAll().then((res) => {
        console.log('huati', res);
        this.topicList = res.data;
      });
    },
  },
};
</script>
<style scoped>
.van_tab {
  font-size: 20px;
}
.border {
  background-color: #6c90f3;
  height: 9rem;
}
.index_head {
  width: 100%;
  height: 5.5rem;
  background-color: #6c90f3;
  position: sticky;
}
.index_touxiang {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.index_search {
  position: absolute;
  width: 26rem;
  left: 4.1rem;
}
.index_soft {
  position: absolute;
  top: 1.2rem;
  right: 4.4rem;
}
.index_chat {
  position: absolute;
  top: 1.2rem;
  right: 0.6rem;
}
.index_care {
  width: 90%;
  background-color: white;
  border-radius: 1rem;
  margin-top: 2rem;
  position: relative;
  margin-left: 1rem;
  padding: 1rem;
}
.index_care_touxiang {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.heart_banner {
  width: 90%;
  margin: 0 auto;
  /* height: 20rem; */
  border-radius: 1.5rem;
  background-color: white;
  /* margin-bottom: 1.5rem; */
  padding: 1rem;
  margin-top: 1.5rem;
}
.heart_banner1 {
  width: 90%;
  margin: 0 auto;
  /* height: 20rem; */
  border-radius: 1.5rem;
  background-color: white;
  /* margin-bottom: 1.5rem; */
  padding: 1rem;
  margin-top: 1.5rem;
}
.heart_bannerLast {
  width: 90%;
  margin: 0 auto;
  /* height: 20rem; */
  border-radius: 1rem;
  background-color: white;
  padding-top: 1rem;

  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 1.5rem;
}
.heart_bannerLast_content {
  margin: 0px;
  padding: 0px;
}
.heart_banner2 {
  width: 90%;
  margin: 0 auto;
  /* height: 20rem; */
  border-radius: 1.5rem;
  background-color: white;
  /* margin-bottom: 1.5rem; */
  padding: 1rem;
  margin-top: 1.5rem;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 1.4rem;
  opacity: 0.75;
  line-height: 15rem;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.toutiaoUserName {
  display: inline-block;
  position: relative;
  top: -3rem;
  font-size: 1.5rem;
  margin-left: -2rem;
  margin-top: -5rem;
}
.toutiaoText {
  font-size: 1.5rem;
  display: inline-block;
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: clip; /* 修剪文本 */
  display: -webkit-box; /* 弹性布局 */
  -webkit-box-orient: vertical; /* 从上向下垂直排列子元素 */
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  margin-top: 2rem;
  margin-bottom: 1rem;
  margin-left: 0.5rem;
}
.toutiaoTime {
  font-size: 1rem;
  margin-left: 5.9rem;
  margin-top: -2.5rem;
  color: gray;
}
.toutiaoUserImg {
  display: inline-block;
}
.textImg {
  display: inline-block;
  margin-left: 2rem;
  margin-top: 2rem;
}
.icon {
  padding-left: 2rem;
}
.discuss {
  font-size: 1.5rem;
  color: gray;
  position: relative;
  top: -0.1rem;
}
.block {
  width: 95%;
  margin: 0 auto;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
}
.unfold {
  position: relative;
  top: -2.5rem;
  left: 27rem;
}

.likes {
  display: inline-block;
}
.has-like {
  display: inline-block;
}
.edit-this-toutiao {
  padding-left: 3rem;
  margin-top: -2rem;
}
.toutiao-message {
  margin-top: 24rem;
}
.toutiao-message-con {
  margin-top: -4.5rem;
  font-size: 1.8rem;
  padding-left: 2rem;
  margin-bottom: -1rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 2rem;
  /* line-height: 8rem; */
  text-align: center;
}
.my-swipe img {
  width: 100%;
}
.footLast {
  width: 100%;
  height: 2rem;
  position: relative;
}
.collectTouTiaoTop {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
.collectTouTiaoTopAll {
  font-size: 2rem;
}
.collectTouTiaoTopCon {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
.danxuankuang {
  margin-left: 32rem;
  margin-top: -7.3rem;
}
.danxuankuang-item {
  margin-bottom: 2rem;
}
.collectTouTiaoTopCon-con {
  margin-bottom: 1rem;
}
.collectTouTiaoTopConAlaery {
  position: fixed;
  bottom: 0rem;
}
.imgFirst {
  vertical-align: top;
  margin-left: 1rem;
}
.iconLast {
  position: relative;
  left: 19rem;
  top: -4rem;
  color: gray;
}
.hot {
  display: inline-block;
  position: relative;
  left: 7rem;
  top: -2rem;
  font-size: 1.5rem;
  color: gray;
}
.topic_discussion_number {
  display: inline-block;
  position: relative;
  left: 7rem;
  top: -2rem;
  font-size: 1.5rem;
  color: gray;
}
.footTopic {
  width: 100%;
  height: 4rem;
}
</style>